<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三维标签加载</title>
    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div class="top"></div>

    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add()" class="btn">创建marker3d</div>
      <div onclick="setBP()" class="btn">修改marker拓展参数</div>
      <div onclick="clearMarker()" class="btn">清除点位</div>
    </div>

    <script type="text/javascript">
      /**
       * 创建marker3d
       */
      const add = () => {
        fdapi.marker3d.clear()
        const marker3dList = []

        let o = {
          id: 'm1',
          groupId: 'marker3dTest',

          text: '孪创1栋', //3D标注显示文字
          textSize: 45, //3D标注显示文字大小
          textColor: '#6BF4F7', //3D标注显示文字颜色
          textOutlineSize: 1, //3D标注显示文字轮廓大小
          textOutlineColor: Color.Black, // 3D标注显示文字轮廓颜色
          textFixed: false, // 3D标注显示文字是否固定文本朝向
          textVisible: true, //3D标注显示文字是否显示文本
          textLocation: [0, 0, 25], // 文字位置
          textRotation: [0, 90, 0], // 文字旋转
          textScale: [10, 10, 10], // 文字缩放

          pointName: 'Point_B_7', //3D标注展示的特效名称
          pointVisible: true, //3D标注是否显示
          pointScale: 5, //3D标注整体缩放比例
          coordinate: [8020.8, 4702.751875, 45.7949853515625], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
          coordinateType: 0, //坐标系类型
          range: [1, 10000], //3D标注的可视距离范围：[min,max]，单位：米
          autoHeight: false //自动判断下方是否有物体，设置正确高度，默认值：false
        }

        let o2 = {
          id: '3dui',
          groupId: 'marker3dTest',
          pointName: '3D_UI_C_3', //3D标注展示的特效名称
          pointVisible: true, //3D标注是否显示
          pointScale: 3, //3D标注整体缩放比例
          coordinate: [8040.6, 4768.7475, 35.715712890625], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
          coordinateType: 0, //坐标系类型
          range: [1, 10000], //3D标注的可视距离范围：[min,max]，单位：米
          autoHeight: false //自动判断下方是否有物体，设置正确高度，默认值：false
        }

        marker3dList.push(o)
        marker3dList.push(o2)
        fdapi.marker3d.add(marker3dList)
      }

      /**
       * 修改marker拓展参数
       */
      const setBP = async () => {
        console.log(await fdapi.marker3d.getBPFunction(['3dui']))

        //1、批量调用多个蓝图函数，函数名称为【文字】【图标】【样式】的蓝图函数
        fdapi.marker3d.callBatchBPFunction([
          {
            id: '3dui',
            functionName: '文字',
            parameters: [
              { paramType: 5, paramValue: '孪创2栋' },
              { paramType: 2, paramValue: 100 },
              { paramType: 6, paramValue: [0, 1, 0, 1] },
              { paramType: 3, paramValue: 1 }
            ]
          },
          {
            id: '3dui',
            functionName: '图标',
            parameters: [
              { paramType: 16, paramValue: '世界' },
              { paramType: 16, paramValue: '图标背景C' }
            ]
          },
          {
            id: '3dui',
            functionName: '特效',
            parameters: [
              { paramType: 16, paramValue: '光圈_3' },
              { paramType: 16, paramValue: '标记点7' }
            ]
          }
        ])
      }

      const clearMarker = () => {
        fdapi.marker3d.clear()
        fdapi.customObject.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, { domId: 'player' })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)

      /**
       * 页面离开事件(离开时清除此页面的操作及重置场景)
       */
      window.onunload = function (e) {
        // 重置场景
        fdapi.reset()
      }
    </script>
  </body>
</html>
